<template>
  <div class="tools-div">
    <el-button type="success" size="small" @click="handleShowSaveDialog">
      添 加
    </el-button>
  </div>

  <el-table :data="list" style="width: 100%">
    <el-table-column prop="specName" label="规格名称" />
    <el-table-column label="规格值" #default="scope">
      <div
        v-for="(item1, index1) in scope.row.specValue"
        :key="index1"
        style="padding: 5px; margin: 0;width: 100%;"
      >
        {{ item1.key }}：
        <span
          v-for="(item2, index2) in item1.valueList"
          :key="index2"
          class="div-atrr"
        >
          {{ item2 }}
        </span>
      </div>
    </el-table-column>
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column label="操作" align="center" width="200" #default="scope">
      <el-button
        type="primary"
        size="small"
        @click="handleShowEditDialog(scope.row)"
      >
        修改
      </el-button>
      <el-button type="danger" size="small" @click="handleDelete(scope.row)">
        删除
      </el-button>
    </el-table-column>
  </el-table>

  <div style="margin-top:20px;text-align:center">
    <el-pagination
      v-model:current-page="pageNum"
      v-model:page-size="pageSize"
      :page-sizes="[1, 2, 3, 4, 5]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="initPageData"
      @current-change="initPageData"
    />
  </div>

  <!-- 新增修改对话框 -->
  <el-dialog v-model="dialogVisible" title="添加或修改" width="40%">
    <el-form label-width="120px">
      <el-form-item label="规格名称">
        <el-input v-model="productSpec.specName" />
      </el-form-item>
      <el-form-item>
        <el-button
          size="default"
          type="success"
          @click="productSpec.specValue.push({})"
        >
          添加新规格
        </el-button>
      </el-form-item>
      <el-form-item
        label=""
        v-for="(item, index) in productSpec.specValue"
        :key="index"
      >
        <el-row>
          <el-col :span="10">
            <el-input
              v-model="item.key"
              placeholder="规格"
              style="width: 90%;"
            />
          </el-col>
          <el-col :span="10">
            <el-input
              v-model="item.valueList"
              placeholder="规格值(如:白色,红色)"
              style="width: 90%;"
            />
          </el-col>
          <el-col :span="4">
            <el-button
              size="default"
              type="danger"
              @click="productSpec.specValue.splice(index, 1)"
            >
              删除
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item align="right">
        <el-button type="primary" @click="handleSaveOrUpdateSpec">
          提交
        </el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  GetProductSpecs,
  GetProductSpecById,
  DeleteProductSpec,
  SaveProductSpec,
  UpdateProductSpec,
} from '@/api/productSpec'
import { ElMessage } from 'element-plus'
//修改按钮事件函数：弹出对话框回显数据
const handleShowEditDialog = row => {
  //==1、根据id查询要更新的规格参数对象： specValue前端仍然需要转为json对象
  //==2、弹出对话框
  //直接使用row回显
  productSpec.value = JSON.parse(JSON.stringify(row))
  dialogVisible.value = true
}
//新增修改 对话框 属性和函数
//productSpec搜集的数据：{specName:规格名称,[{key: 规格, valueList: 规格值列表以逗号分隔},{key: 颜色 , valueList: 白色,黑色,红色},{}]}
const dialogVisible = ref(false)
const productSpec = ref({
  specValue: [{}],
})

//对话框提交按钮事件函数
const handleSaveOrUpdateSpec = () => {
  if (productSpec.value.id) {
    //更新
    handleUpdateSpec()
  } else {
    handleSaveSpec()
  }
}
const handleSaveSpec = async () => {
  //需要将搜集的规格属性值处理后提交给后端
  //1、将productSpec的specValue数组中每个json对象的 valueList字符串属性值以逗号分隔转为json数组
  // productSpec.value.specValue = productSpec.value.specValue.split(",")
  productSpec.value.specValue.forEach(sv => {
    sv.valueList = sv.valueList.split(',')
  })

  //2、将productSpec的specValue数组转为json字符串
  //深拷贝和浅拷贝：  始终使用新增对话框表单绑定的对象 进行修改属性值，表单使用了vue渲染数据
  //浅拷贝： 直接将目标对象的引用赋值给新变量  它俩指向同一个内存
  // let ps = productSpec.value
  //深拷贝：  新创建一个对象(开辟了新内存)  可以将对象转为json字符串然后还原为json对象
  let ps = JSON.parse(JSON.stringify(productSpec.value))
  ps.specValue = JSON.stringify(ps.specValue)
  //3、提交新增请求
  // console.log(ps)
  await SaveProductSpec(ps)
  ElMessage.success('新增成功')
  initPageData()
  dialogVisible.value = false
}
const handleUpdateSpec = async () => {
  //要提交的对象 有些属性值和新增一样仍然需要转换
  //1、将productSpec的specValue数组中每个json对象的 valueList字符串属性值以逗号分隔转为json数组
  productSpec.value.specValue.forEach(sv => {
    console.log(sv)
    //更新时sv.valueList有可能不是字符串
    if (typeof sv.valueList === 'string') {
      //是字符串 分隔字符串
      sv.valueList = sv.valueList.split(',')
    }
  })
  //2、将productSpec的specValue数组转为json字符串
  //深拷贝和浅拷贝：  始终使用新增对话框表单绑定的对象 进行修改属性值，表单使用了vue渲染数据
  //浅拷贝： 直接将目标对象的引用赋值给新变量  它俩指向同一个内存
  // let ps = productSpec.value
  //深拷贝：  新创建一个对象(开辟了新内存)  可以将对象转为json字符串然后还原为json对象
  let ps = JSON.parse(JSON.stringify(productSpec.value))
  ps.specValue = JSON.stringify(ps.specValue)
  //提交更新
  await UpdateProductSpec(ps)
  ElMessage.success('更新成功')
  initPageData()
  dialogVisible.value = false
}
//添加按钮事件函数
const handleShowSaveDialog = () => {
  productSpec.value = {
    specValue: [],
  }
  dialogVisible.value = true
}
//删除按钮事件函数
const handleDelete = async row => {
  await DeleteProductSpec(row.id)
  ElMessage.success('删除成功')
  initPageData()
}

// 表格数据模型
const list = ref([])
//页面初始化加载数据
onMounted(() => {
  initPageData()
})
// 分页条数据模型
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(3)
const initPageData = async () => {
  const { data } = await GetProductSpecs(pageNum.value, pageSize.value)
  list.value = data.page.list
  //遍历后端返回的分页数据所有的specValue值，将json数组字符串 转为json数组对象
  list.value.forEach(spec => {
    spec.specValue = JSON.parse(spec.specValue)
  })
  total.value = data.page.total
}
</script>

<style scoped>
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.div-atrr {
  padding: 5px 10px;
  margin: 0 10px;
  background-color: powderblue;
  border-radius: 10px;
}
</style>
